<link rel="stylesheet" href="ccay/example/demo.css"  type="text/css" />
<script type="text/javascript" src="ccay/example/demo.js" charset="utf-8"></script>
<script type="text/javascript" src="ccay/example/ui/htmlStyle/view.js" charset="utf-8"></script>

<div id="viewDemo">
	<div title='table查看'  tabid='tab1'>
	
	 <h3>注意：<p>由于查看页面使用流布局时，当有两栏查看内容时，title和内容较长时，会显示不全，呈“...”,所建议查看页面优先使用table查看</h3>
	 <div class="demo">
		<form class="init ccay-form" >
		 	<table class="ccay-table">
			 	<tr>
			 		<th style="width:15%" class='require' >较长的文本，使用table时，可显示全部，避免流布局的显示不全，呈“...”的情况</th>
			 		<td style="width:35%">titletitletitletitletitletitletitletitletitle</td>
			 		<th style="width:15%">title</th>
			 		<td style="width:35%">titletitletitletitletitletitletitletitletitle</td>
			 	</tr>
			 	<tr>
			 		<th>title</th>
			 		<td>ccay</td>
			 		<th>title</th>
			 		<td>较长的内容文本查看，建议优先使用table，可显示全部，避免流布局的显示不全，呈“...”的情况，可自动换行显示全部文本哦</td>
			 	</tr>
			 	<tr>
			 		<th>title</th>
			 		<td>ccay</td>
			 		<th>title</th>
			 		<td>ccay</td>
			 	</tr>
		 	</table>
		</form>	
	  </div>	
		<h3>html Code</h3>
		<div class="codeArea">
				<pre id='shotText'>
&lt;form class="<font color="red">init ccay-form</font>" >
	&lt;table class="<font color="red">ccay-table</font>">
		&lt;tr>
	 		&lt;th style="width:15%" class='require' >较长的文本，使用table时，可显示全部，避免流布局的显示不全，呈“...”的情况&lt;/th>
			&lt;td style="width:35%">titletitletitletitletitletitletitletitletitle&lt;/td>
			&lt;th style="width:15%">title&lt;/th>
			&lt;td style="width:35%">titletitletitletitletitletitletitletitletitle&lt;/td>
		&lt;/tr>
		&lt;tr>
			&lt;th>title&lt;/th>
			&lt;td>ccay&lt;/td>
			&lt;th>title&lt;/th>
			&lt;td>较长的内容文本查看，建议优先使用table，可显示全部，避免流布局的显示不全，呈“...”的情况，可自动换行显示全部文本哦&lt;/td>
		&lt;/tr>
		&lt;tr>
			&lt;th>title&lt;/th>
			&lt;td>ccay&lt;/td>
			&lt;th>title&lt;/th>
			&lt;td>ccay&lt;/td>
		&lt;/tr>
	&lt;/table>
&lt;/form>
		 	</pre>
			</div>
    </div>
    <div title='流布局查看'  tabid='tab2'>
		<div class="demo">
			<form class="init ccay-form">
				<div class="ccay-form-body">
					<ul>
						<li class="ccay-form-row"><samp>短文本</samp> <span
							class='ccay-form-input'><label>test
									testtesttesttest testtest testtesttesttesttest</label></span></li>
						<li class="ccay-form-row"><samp>短文本</samp> <span
							class='ccay-form-input'><label>test
									testtesttesttest testtest testtesttesttesttest</label></span></li>			
						<li class="ccay-form-row"><samp>短文本短文本短文本短文本短文本短文本</samp> <span
							class='ccay-form-input'><label>test
									testtesttesttest testtest testtesttesttesttest</label></span></li>
						<li class="ccay-form-row ccay-form-longcell"><samp>单行长文本</samp>
							<span class='ccay-form-input '><label>test
									testtesttesttest testtest testtesttesttesttest test
									testtesttesttest testtest testtesttesttesttestv test
									testtesttesttest testtest testtesttesttesttest</label></span></li>
						<li class="ccay-form-row ccay-form-whole"><samp>3行长文本</samp>
							<span class='ccay-form-input'> <label>testtesttesttesttest
									test testtesttesttest testtest testtesttesttesttest test
									testtesttesttest testtest testtesttesttesttest test
									testtesttesttest testtest testtesttesttesttest test
									testtesttesttest testtest testtesttesttesttest test
									testtesttesttest testtest testtesttesttesttest test
									testtesttesttest testtest testtesttesttesttest test te</label>
						</span></li>
					</ul>
				</div>
				<div class="ccay-form-custom">
					<ul>
						<li class="ccay-form-row ccay-form-whole"><samp>不定长长文本_不定长长文本_不定长长文本_不定长长文本</samp> <span
							class='ccay-form-input'><label>test
									testtesttesttest testtest testtesttesttesttest test
									testtesttesttest testtest testtesttesttesttest test
									testtesttesttest testtest testtesttesttesttest test
									testtesttesttest testtest testtesttesttesttest test
									testtesttesttest testtest testtesttesttesttest test
									testtesttesttest testtest testtesttesttesttest test
									testtesttesttest testtest testtesttesttesttest test
									testtesttesttest testtest testtesttesttesttest test
									testtesttesttest testtest testtesttesttesttest test
									testtesttesttest testtest testtesttesttesttest test
									testtesttesttest testtest testtesttesttesttest test
									testtesttesttest testtest testtesttesttesttest test
									testtesttesttest testtest testtesttesttesttest test
									testtesttesttest testtest testtesttesttesttest test
									testtesttesttest testtest testtesttesttesttest test
									testtesttesttest testtest testtesttesttesttest test
									testtesttesttest testtest testtesttesttesttest</label>
						</span></li>
					</ul>
				</div>
			</form>
		</div>
		<div class="codeArea">
				<pre id='longText'>
&lt;form class="<font color="red">init ccay-form</font>">
	&lt;!-- <font color="red">form body ccay-form-body</font> -->
	&lt;div class="<font color="red">ccay-form-body</font>">
		&lt;ul>
			&lt;!-- <font color="red">普通的文本展示 ccay-form-row</font> -->
			&lt;li class="ccay-form-row">
			     &lt;samp>短文本&lt;/samp>
			     &lt;span class='ccay-form-input'>&lt;label>test...&lt;/label>&lt;/span>
			&lt;/li>
			&lt;li class="ccay-form-row">
			     &lt;samp>短文本&lt;/samp>
			     &lt;span class='ccay-form-input'>&lt;label>test...&lt;/label>&lt;/span>
			&lt;/li>
			&lt;li class="ccay-form-row">
			     &lt;samp>短文本短文本短文本短文本短文本短文本&lt;/samp>
			     &lt;span class='ccay-form-input'>&lt;label>test...&lt;/label>&lt;/span>
			&lt;/li>
			&lt;!-- <font color="red">单行长文本展示 ccay-form-row ccay-form-longcell</font> -->
			&lt;li class="ccay-form-row ccay-form-longcell">
			     &lt;samp>单行长文本&lt;/samp>
				 &lt;span class='ccay-form-input '>&lt;label>test...&lt;/label>&lt;/span>
			&lt;/li>
			&lt;!-- <font color="red">3行长文本展示 ccay-form-row ccay-form-whole</font> -->
			&lt;li class="ccay-form-row ccay-form-whole">
			     &lt;samp>3行长文本&lt;/samp>
				 &lt;span class='ccay-form-input'> &lt;label>test...&lt;/label>&lt;/span>
			&lt;/li>
		&lt;/ul>
	&lt;/div>
	&lt;!-- <font color="red">扩展的文本展示 ccay-form-custom</font> -->
	&lt;div class="ccay-form-custom">
		&lt;ul>
			&lt;!-- <font color="red">title按内容区长短展示 ccay-form-row ccay-form-whole</font> -->
			&lt;li class="ccay-form-row ccay-form-whole">
			     &lt;samp>不定长长文本&lt;/samp> 
			     &lt;span class='ccay-form-input'>&lt;label>test...&lt;/label>&lt;/span>
			&lt;/li>
		&lt;/ul>
	&lt;/div>
&lt;/form>				
                </pre>
		</div>
	</div> 
	<div title="试一试"  tabid="trytab" >
		    <fieldset class='ccay-demo'>
		    <legend ><h2>代码区</h2></legend>
			   
			   <span>请在下面的文本框中编辑您的代码，然后单击此按钮测试结果  ————></span><input value="try it yourself" type="button" onclick="Ccay.example.runDemo()" /> 
	
					<div>
					    <table  style="width:100%;">
					      <tr>
					        <td style="width:100%;">
							<h3>js Code:</h3>	
							  <!-- 高度按需来调整。默认最小应为100px -->					
		                      <textarea id="jsTxt" style="height:50px;width:99%;"></textarea>
		                    </td>   
		                  </tr>
		                  <tr>
		                    <td style="width:100%;">
							<h3>html Code:</h3>
							  <!-- 高度按需来调整。默认最小应为100px -->
		                      <textarea id="htmlTxt" style="height:300px;width:99%;"></textarea>
		                    </td>
		                  </tr> 
	                    </table>
					</div>
	           </fieldset>
	        <fieldset class='ccay-demo'>
	          <legend ><h2>结果区</h2></legend>
				<div>
					<div style="overflow:auto;" id="demoMainPanel"></div>
				</div>
	        </fieldset>
	     </div>
	<div tabid="tab4" title="FAQ">
	  <form class="init ccay-form">
	    <div class="ccay-form-body ccay-form-custom">
	    <ul>
		        <li class="ccay-form-row">
		            <samp><h3>问题</h3></samp>
		           <span class="ccay-form-input">
		               <h3>解决方案</h3>
		           </span>
		        </li>
		        <!-- 若问题和内容较多，可在li中的class加上ccay-form-whole -->
		        <li class="ccay-form-row">
		                          <samp class="i18n" i18nKey=""></samp>                          
		                         <span class="ccay-form-input"></span>
		        </li>  
		    </ul>
		</div>
	  </form>                    
</div>  
</div>	 
